<template>
  <div>
<!--    <el-tabs-->
<!--      v-model="activePath"-->
<!--      v-if="$store.state.pageTabs.tabs.length > 0"-->
<!--      @edit="handleEdit"-->
<!--      @tab-click="handleClick"-->
<!--      @tab-remove="handleRemove"-->
<!--      type="card">-->
<!--      <el-tab-pane-->
<!--        v-for="(item,i) in $store.state.pageTabs.tabs"-->
<!--        :closable="i!=0"-->
<!--        :name="item.path"-->
<!--        :key="item.path"-->
<!--        >-->
<!--        <template slot="label">-->
<!--          <span @contextmenu.prevent="openMenu(item,$event)">{{item.name}}</span>-->
<!--        </template>-->
<!--      </el-tab-pane>-->
<!--    </el-tabs>-->
    <div style="border-bottom: 1px solid #D9D9DE;border-top: 1px solid #D9D9DE;margin-bottom: 15px">
      <el-tag
        class="_tag"
        v-for="(item,i) in $store.state.pageTabs.tabs"
        style="margin: 0 1px"
        effect="plain"
        :type="(activePath == item.path?'primary':'info')"
        :key="i"
        :closable="i!=0"
        :disable-transitions="false"
        @contextmenu.native.prevent="openMenu(item,$event)"
        @click="handleClick(item.path)"
        @close="handleRemove(item.path)">
        {{item.name}}
      </el-tag>
    </div>
    <!-- 右键弹窗 -->
    <transition name="el-zoom-in-top">
      <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="_contextmenu">
        <li @click="handleRefresh" v-if="selectPath == activePath">刷新缓存</li>
        <li @click="closeSelectTab">关闭标签页</li>
        <li @click="closeOtherTab">关闭其他标签页</li>
        <li @click="closeToLeft">关闭左侧标签页</li>
        <li @click="closeToRight">关闭右侧标签页</li>
        <li @click="closeAllTab">关闭全部标签页</li>
      </ul>
    </transition>
  </div>
</template>

<script>
  export default {
    name: "page-tabs",
    data(){
      return{
        activePath: this.$route.path,
        activePage: this.$route.meta.pageName,
        activeName: this.$route.name,
        selectPath: '',
        visible: false,
        top: 0,
        left: 0,
      }
    },
    methods: {
      /** tab点击,路由跳转 **/
      handleClick(el){
        /** 使用tabs 标签时用这个 **/
        if(el.name && this.$route.path != el.name){
          this.$router.push(el.name);
        }
        if(!el.name && this.$route.path != el){
          this.$router.push(el);
        }
      },
      /** tab删除，如果删除当前所在tab，跳转到最后的tab **/
      handleRemove(targetPath){
        this.$store.commit('DEL_TAB',targetPath);
        if(this.activePath == targetPath){
          let tabs = this.$store.state.pageTabs.tabs;
          this.activePath = tabs[tabs.length-1].path;
          this.$router.push(this.activePath);
        }
      },
      /** 新增tab **/
      handleEdit(targetPath, action){
        this.activePath = targetPath;
      },
      /** 右键菜单 刷新tab缓存 **/
      handleRefresh(){
        this.$store.commit('PUSH_EXCLUDE',this.activePage);
        this.$store.commit('SET_REFRESH',false);
        this.$nextTick(()=>{
          this.$store.commit('SET_REFRESH',true);
          this.$store.commit('CLEAR_EXCLUDE');
        });
        this.closeMenu();
      },
      /** 右键菜单 关闭tab页 **/
      closeSelectTab(){
        this.$store.commit('DEL_TAB',this.selectPath);
        if(this.activePath == this.selectPath){
          let tabs = this.$store.state.pageTabs.tabs;
          this.activePath = tabs[tabs.length-1].path;
          this.$router.push(this.activePath);
        }
      },
      /** 右键菜单 关闭其他tab页 **/
      closeOtherTab(){
        this.$store.commit('DEL_OTHER_TAB',this.selectPath);
        if(this.activePath != this.selectPath){
          this.$router.push(this.selectPath);
        }
      },
      /** 关闭左侧tab **/
      closeToLeft(){
        this.$store.commit('DEL_TO_LEFT',this.selectPath);
        let index = this.$store.state.pageTabs.tabs.findIndex(item => item.path == this.activePath);
        if(index == -1){
          this.$router.push(this.selectPath);
        }
      },
      /** 关闭右侧tab **/
      closeToRight(){
        this.$store.commit('DEL_TO_RIGHT',this.selectPath);
        let index = this.$store.state.pageTabs.tabs.findIndex(item => item.path == this.activePath);
        if(index == -1){
          this.$router.push(this.selectPath);
        }
      },
      /** 右键菜单 关闭全部tab页 **/
      closeAllTab(){
        this.$store.commit('DEL_TAB_ALL');
        this.$router.push('/home');
      },
      /** 打开右键菜单 **/
      openMenu(tab,e){
        this.selectPath = tab.path;
        const menuMinWidth = 105;
        const offsetWidth = this.$el.offsetWidth;  // container width
        const maxLeft = offsetWidth - menuMinWidth;  // left boundary
        const left = e.x + 15;  // 15: margin right
        if (left > maxLeft) {
          this.left = maxLeft
        } else {
          this.left = left
        }
        this.top = e.clientY;
        this.visible = true;
      },
      /** 关闭菜单 **/
      closeMenu() {
        this.visible = false
      },
    },
    watch:{
      /** 监听路由变化，切换tab **/
      $route(val){
        this.activePath = val.path;
        this.activeName = val.name;
        this.activePage = val.meta.pageName;
      },
      /** 控制右键窗口关闭 **/
      visible(value) {
        if (value) {
          document.body.addEventListener('click', this.closeMenu)
        } else {
          document.body.removeEventListener('click', this.closeMenu)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-tabs__nav{
    border-radius: 0 !important;
    *{
      /*border: none !important;*/
      line-height: 20px;
      height: 25px;
      outline: none;
    }
  }
  ::v-deep .is-active .el-icon-close{
    display: none;
  }
  ::v-deep .is-active:hover{
    & .el-icon-close{
      display: inline-block;
    }
  }

  ::v-deep ._tag{
    .el-icon-close{
      display: none;
    }
  }

  ::v-deep ._tag:hover{
    .el-icon-close{
      display: inline-block;
    }
  }

  ._contextmenu {
    margin: 0;
    background: #fff;
    z-index: 3000;
    position: absolute;
    list-style-type: none;
    padding: 5px 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
    li {
      margin: 0;
      padding: 7px 16px;
      cursor: pointer;
      &:hover {
        background: #eee;
      }
    }
  }

  ._tag{
    cursor: pointer;
    border: none;
    &:hover{
      color: #409EFF !important;
    }
  }
</style>
